<template>
    <div class="me">
        <div class="header flex-box-align" @click="$router.push('/personInfo')">
            <div class="flex flex-box-align">
                <img :src="userInfo.headPortrait" alt="">
                <span>{{userInfo.nickname}}</span>
            </div>
            <div class="icon">
                <van-icon name="arrow" color="#fff" size="20px"/>
            </div>
        </div>
        <van-cell title="我的提醒" is-link @click="$router.push('/remind')">
            <template slot="icon">
                <img src="../images/2@2x.png" alt="">
            </template>
        </van-cell>

    </div>
</template>
<script>
    import format from 'date-fns/format';
    import { userDetail } from "../constants/api";
    import https from "../https";
    export default {
        components: {
        },
        data() {
            return {
                userInfo: {}
            }
        },
        mounted() {
            this.getUserDetail()
        },
        methods: {
            async getUserDetail() {
                const id = JSON.parse(localStorage.getItem('userInfo')).id;
                const json = await https.fetchPost(userDetail+'?id='+id, {});
                if (json.data.code === 200) {
                    this.userInfo = json.data.data.bussData;
                    localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .header {
        height:2.08rem;
        background:rgba(53,115,255,1);
        border-bottom: .09rem solid #D7E3FF;
        div {
            &:first-child {
                margin-left: .79rem;
                img {
                    width: 1.24rem;
                    height: 1.24rem;
                    border-radius: 50%;
                    border: 2px solid #5488FF;
                }
                span {
                    font-size: .36rem;
                    color: #fff;
                    margin-left: .17rem;
                }
            }
        }
        .icon {
            margin-right: .34rem;
        }
    }
    .van-cell {
        align-items: center;
        border-bottom: 1px solid #F2F2F2;
    }
    .van-cell.van-cell--clickable {
        img {
            width: .25rem;
            height: .29rem;
            vertical-align: middle;
            margin-right: .21rem;
        }
    }
</style>

